<template>
  <view class="monitor-page">


    <!-- 监控状态概览 -->
    <view class="monitor-overview">
      <view class="overview-header">
        <view class="overview-title">监控设备状态</view>
        <u-button 
          type="primary" 
          size="small" 
          text="全屏" 
          @click="toggleFullscreen"
        ></u-button>
      </view>
      <view class="status-grid">
        <view 
          v-for="camera in cameraStatus" 
          :key="camera.id"
          class="status-card"
          :class="{ 'status-card--offline': !camera.online }"
        >
          <view class="camera-icon">
            <u-icon 
              name="camera" 
              :color="camera.online ? '#2ed573' : '#ff4757'" 
              size="24"
            ></u-icon>
          </view>
          <view class="camera-info">
            <view class="camera-name">{{ camera.name }}</view>
            <view class="camera-status">{{ camera.online ? '在线' : '离线' }}</view>
          </view>
          <view class="camera-action">
            <u-button 
              v-if="camera.online"
              type="primary" 
              size="mini" 
              text="查看" 
              @click="viewCamera(camera)"
            ></u-button>
            <u-button 
              v-else
              type="error" 
              size="mini" 
              text="离线" 
              disabled
            ></u-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 实时监控区域 -->
    <view class="live-monitor-section">
      <view class="section-title">实时监控</view>
      <view class="monitor-grid">
        <view 
          v-for="camera in onlineCameras" 
          :key="camera.id"
          class="monitor-item"
          @click="viewCamera(camera)"
        >
          <view class="monitor-placeholder">
            <u-icon name="camera" color="#999" size="32"></u-icon>
            <text class="placeholder-text">{{ camera.name }}</text>
            <text class="placeholder-status">实时监控中</text>
          </view>
          <view class="monitor-overlay">
            <u-button type="primary" size="mini" text="查看"></u-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 录像回放区域 -->
    <view class="playback-section">
      <view class="section-title">录像回放</view>
      <view class="playback-controls">
        <view class="date-picker">
          <u-input
            v-model="selectedDate"
            placeholder="选择日期"
            readonly
            @click="showDatePicker = true"
          ></u-input>
        </view>
        <view class="time-picker">
          <u-input
            v-model="selectedTime"
            placeholder="选择时间"
            readonly
            @click="showTimePicker = true"
          ></u-input>
        </view>
        <u-button type="primary" text="查询录像" @click="searchPlayback"></u-button>
      </view>
      
      <view class="playback-list">
        <view 
          v-for="record in playbackRecords" 
          :key="record.id"
          class="playback-item"
          @click="playRecord(record)"
        >
          <view class="record-icon">
            <u-icon name="video-camera" color="#3742fa" size="20"></u-icon>
          </view>
          <view class="record-info">
            <view class="record-title">{{ record.title }}</view>
            <view class="record-details">
              {{ record.cameraName }} · {{ record.duration }} · {{ record.time }}
            </view>
          </view>
          <view class="record-action">
            <u-button type="primary" size="mini" text="播放"></u-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 日期选择器 -->
    <u-picker
      :show="showDatePicker"
      mode="date"
      @confirm="onDateConfirm"
      @cancel="showDatePicker = false"
    ></u-picker>

    <!-- 时间选择器 -->
    <u-picker
      :show="showTimePicker"
      mode="time"
      @confirm="onTimeConfirm"
      @cancel="showTimePicker = false"
    ></u-picker>

    <!-- 监控查看弹窗 -->
    <u-popup 
      :show="showMonitorModal" 
      mode="center" 
      :round="10"
      @close="showMonitorModal = false"
    >
      <view class="monitor-modal">
        <view class="modal-header">
          <text class="modal-title">{{ selectedCamera?.name }} - 实时监控</text>
          <u-icon name="close" size="20" @click="showMonitorModal = false"></u-icon>
        </view>
        <view class="modal-content">
          <view class="monitor-placeholder-large">
            <u-icon name="camera" color="#999" size="48"></u-icon>
            <text class="placeholder-text-large">监控画面</text>
            <text class="placeholder-desc">实时监控画面将在此显示</text>
          </view>
          <view class="monitor-controls">
            <u-button type="info" text="截图" @click="takeScreenshot"></u-button>
            <u-button type="warning" text="录像" @click="startRecording"></u-button>
            <u-button type="success" text="全屏" @click="fullscreenCamera"></u-button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
/**
 * 监控查看页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 监控查看功能，包含实时监控、录像回放等
 */

import { ref, reactive, computed, onMounted } from 'vue'

// 页面状态
const showDatePicker = ref(false)
const showTimePicker = ref(false)
const showMonitorModal = ref(false)
const selectedCamera = ref(null)
const selectedDate = ref('')
const selectedTime = ref('')

// 监控设备状态
const cameraStatus = ref([
  {
    id: 1,
    name: '小区大门监控',
    location: '小区大门',
    online: true,
    status: 'normal'
  },
  {
    id: 2,
    name: '1栋单元门监控',
    location: '1栋单元门',
    online: true,
    status: 'normal'
  },
  {
    id: 3,
    name: '2栋单元门监控',
    location: '2栋单元门',
    online: true,
    status: 'normal'
  },
  {
    id: 4,
    name: '3栋单元门监控',
    location: '3栋单元门',
    online: false,
    status: 'offline'
  },
  {
    id: 5,
    name: '地下车库监控',
    location: '地下车库',
    online: true,
    status: 'normal'
  },
  {
    id: 6,
    name: '后门监控',
    location: '后门',
    online: true,
    status: 'normal'
  },
  {
    id: 7,
    name: '小区中心广场监控',
    location: '中心广场',
    online: true,
    status: 'normal'
  },
  {
    id: 8,
    name: '停车场监控',
    location: '停车场',
    online: true,
    status: 'normal'
  }
])

// 录像回放记录
const playbackRecords = ref([
  {
    id: 1,
    title: '小区大门录像',
    cameraName: '小区大门监控',
    duration: '2小时30分钟',
    time: '2025-01-30 14:00-16:30',
    size: '256MB'
  },
  {
    id: 2,
    title: '1栋单元门录像',
    cameraName: '1栋单元门监控',
    duration: '1小时45分钟',
    time: '2025-01-30 15:00-16:45',
    size: '180MB'
  },
  {
    id: 3,
    title: '地下车库录像',
    cameraName: '地下车库监控',
    duration: '3小时15分钟',
    time: '2025-01-30 13:00-16:15',
    size: '320MB'
  },
  {
    id: 4,
    title: '后门录像',
    cameraName: '后门监控',
    duration: '1小时20分钟',
    time: '2025-01-30 16:00-17:20',
    size: '150MB'
  }
])

// 计算属性
const onlineCameras = computed(() => {
  return cameraStatus.value.filter(camera => camera.online)
})

// 方法
const goBack = () => {
  uni.navigateBack()
}

const toggleFullscreen = () => {
  uni.showToast({
    title: '全屏功能开发中',
    icon: 'none'
  })
}

const viewCamera = (camera) => {
  if (!camera.online) {
    uni.showToast({
      title: '监控设备离线',
      icon: 'none'
    })
    return
  }
  
  selectedCamera.value = camera
  showMonitorModal.value = true
}

const onDateConfirm = (event) => {
  selectedDate.value = `${event.year}-${event.month}-${event.day}`
  showDatePicker.value = false
}

const onTimeConfirm = (event) => {
  selectedTime.value = `${event.hour}:${event.minute}`
  showTimePicker.value = false
}

const searchPlayback = () => {
  if (!selectedDate.value || !selectedTime.value) {
    uni.showToast({
      title: '请选择日期和时间',
      icon: 'none'
    })
    return
  }
  
  uni.showToast({
    title: '录像查询功能开发中',
    icon: 'none'
  })
}

const playRecord = (record) => {
  uni.showToast({
    title: `播放录像：${record.title}`,
    icon: 'none'
  })
}

const takeScreenshot = () => {
  uni.showToast({
    title: '截图功能开发中',
    icon: 'none'
  })
}

const startRecording = () => {
  uni.showToast({
    title: '录像功能开发中',
    icon: 'none'
  })
}

const fullscreenCamera = () => {
  uni.showToast({
    title: '全屏功能开发中',
    icon: 'none'
  })
}

// 页面加载
onMounted(() => {
  // 设置默认日期为今天
  const today = new Date()
  selectedDate.value = today.toISOString().split('T')[0]
  selectedTime.value = '14:00'
  
  console.log('监控查看页面加载完成')
})
</script>

<style lang="scss" scoped>
.monitor-page {
  min-height: 100vh;
  width: 100vw;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



.monitor-overview {
  background: white;
  padding: 16px;
  margin-bottom: 12px;
  
  .overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .overview-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      line-height: 1.2;
    }
  }
  
  .status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }
  
  .status-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    
    &--offline {
      opacity: 0.6;
    }
    
    .camera-icon {
      flex-shrink: 0;
    }
    
    .camera-info {
      flex: 1;
      min-width: 0;
      
      .camera-name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
      }
      
      .camera-status {
        font-size: 12px;
        color: #666;
      }
    }
    
    .camera-action {
      flex-shrink: 0;
    }
  }
}

.live-monitor-section {
  background: white;
  padding: 16px;
  margin-bottom: 12px;
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
  }
  
  .monitor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .monitor-item {
    position: relative;
    background: #f8f9fa;
    border-radius: 8px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    
    .monitor-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      
      .placeholder-text {
        font-size: 14px;
        color: #333;
        font-weight: 500;
      }
      
      .placeholder-status {
        font-size: 12px;
        color: #666;
      }
    }
    
    .monitor-overlay {
      position: absolute;
      bottom: 8px;
      right: 8px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    &:hover .monitor-overlay {
      opacity: 1;
    }
  }
}

.playback-section {
  background: white;
  padding: 16px;
  flex: 1;
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
  }
  
  .playback-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    
    .date-picker,
    .time-picker {
      flex: 1;
      min-width: 120px;
    }
  }
  
  .playback-list {
    .playback-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .record-icon {
        flex-shrink: 0;
      }
      
      .record-info {
        flex: 1;
        min-width: 0;
        
        .record-title {
          font-size: 14px;
          font-weight: 500;
          color: #333;
          margin-bottom: 4px;
        }
        
        .record-details {
          font-size: 12px;
          color: #666;
        }
      }
      
      .record-action {
        flex-shrink: 0;
      }
    }
  }
}

.monitor-modal {
  width: 90vw;
  max-width: 500px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  
  .modal-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }
  
  .modal-content {
    padding: 20px;
  }
  
  .monitor-placeholder-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 20px;
    
    .placeholder-text-large {
      font-size: 18px;
      color: #333;
      font-weight: 500;
    }
    
    .placeholder-desc {
      font-size: 14px;
      color: #666;
    }
  }
  
  .monitor-controls {
    display: flex;
    gap: 12px;
    
    .u-button {
      flex: 1;
    }
  }
}

// 响应式适配
@media screen and (max-width: 375px) {
  .monitor-overview,
  .live-monitor-section,
  .playback-section {
    padding: 12px;
  }
  
  .status-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
  }
  
  .monitor-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .status-card,
  .monitor-item {
    padding: 12px;
  }
  
  .playback-controls {
    flex-direction: column;
    
    .date-picker,
    .time-picker {
      min-width: auto;
    }
  }
}

@media screen and (min-width: 414px) {
  .monitor-page {
    width: 100vw;
    max-width: none;
    margin: 0;
  }
}
</style>
